<template lang="pug">
    div(class="main-all")
        div(class="simulation-screen")
            slot
        span(class="simulation-back",@click="butonClick('back')")
            span(class="back-line no-pop")
                span(class="back-line-text no-pop")  保存并退出
        span(class="simulation-up",v-touch:start="startUp",v-touch:end="endUp",v-touch:moved="upMoved")
            span(class="back-line no-pop")
                span(class="back-line-text no-pop") 增加或上移
        span(class="simulation-down",v-touch:start="startDown",v-touch:end="endDown",v-touch:moved="downMoved")
            span(class="back-line no-pop")
                span(class="back-line-text no-pop") 减少或下移
        span(class="simulation-yes",v-touch:start="YesStart",v-touch:end="YesEnd",v-touch:moved="YesMoved",v-if="yesLongTab")
            span(class="back-line no-pop")
                span(class="back-line-text no-pop") 确定或进入
        span(class="simulation-yes",@click="butonClick('yes')",v-else)
            span(class="back-line no-pop")
                span(class="back-line-text no-pop") 确定或进入
</template>

<script>
    import dayjs from "dayjs";

    export default {
        name: "skin",
        data() {
            return {
                startAt: null, // 按钮按下时间
                downInterval: null,
                upInterval: null,
                actInterval: null
            };
        },
        props:{
            yesLongTab: { type: Boolean, default: false },// 是否支持长按yes按钮
        },
        methods: {
            /**计算模拟器屏幕高度 */
            calSimulationScreenHeight() {
                var d = document.querySelector(".simulation-screen");
                var width = d.clientWidth;
                // 数字比例根据图片像素比转换
                d.style.height = (width * 182) / 302 + "px";
            },
            /**计算模拟器四个按钮所在的位置 */
            calSimulationButtonsHeight() {
                var classes = [
                    ".simulation-back",
                    ".simulation-up",
                    ".simulation-down",
                    ".simulation-yes"
                ];

                classes.forEach(c => {
                    var d = document.querySelector(c);
                    var width = d.clientWidth;
                    d.style.height = width + "px";
                });
            },

            butonClick(eventName) {
                this.$emit(eventName);
            },

            ////////////////////////////////////////////////////
            YesStart() {
                this.startAt = dayjs();
                if (this.actInterval != null) return;
                this.actInterval = setInterval(
                    function () {
                        this.$emit("during-yes"); // 每0.5秒触发一次during事件，如果是click事件，那么在没执行之前，就会在endDown中被clear掉
                        this.$emit("yes-longtap");
                    }.bind(this),
                    500
                );

            },

            YesEnd() {
                clearInterval(this.actInterval);
                this.actInterval = null;
                const milliseconds = dayjs().diff(this.startAt, "milliseconds");
                if (milliseconds < 300) {
                    this.$emit("yes");
                }else{
                    this.$emit("yes-moved");
                }
            },

            YesMoved() {
                // 清除轮询，因为手机上长按移出不会触发click
                clearInterval(this.actInterval);
                this.$emit("yes-moved");
            },
            ////////////////////////////////////////////////////

            startDown() {
                this.startAt = dayjs();
                if (this.downInterval == null) {
                    this.downInterval = setInterval(
                        function () {
                            this.$emit("duringDown"); // 每0.5秒触发一次during事件，如果是click事件，那么在没执行之前，就会在endDown中被clear掉
                            this.$emit("downlongtap");
                        }.bind(this),
                        500
                    );
                }
            },
            endDown() {
                clearInterval(this.downInterval);
                this.downInterval = null;
                var milliseconds = dayjs().diff(this.startAt, "milliseconds");
                if (milliseconds < 300) {
                    this.$emit("down");
                }
            },
            downMoved() {
                // 清除轮询，因为手机上长按移出不会触发click
                clearInterval(this.downInterval);
                this.$emit("down-moved");
            },

            ////////////////////////////////////////////////////

            startUp() {
                this.startAt = dayjs();
                const vm = this;
                this.upInterval = setInterval(function () {
                    vm.$emit("duringUp"); // 每0.5秒触发一次during事件，如果是click事件，那么在没执行之前，就会在endDown中被clear掉
                    vm.$emit("uplongtap");
                }, 500);
            },
            endUp() {
                clearInterval(this.upInterval);
                this.$emit("up-end");
                const milliseconds = dayjs().diff(this.startAt, "milliseconds");
                if (milliseconds < 300) {
                    this.$emit("up");
                }
            },
            upMoved() {
                clearInterval(this.upInterval);
                this.$emit("up-moved");
            }
            ////////////////////////////////////////////////////

        },
        mounted() {
            this.calSimulationButtonsHeight();
            this.calSimulationScreenHeight();

            const keyboard = document.querySelector(".main-all"); //键盘

            keyboard.addEventListener("contextmenu", function (e) {
                e.preventDefault();
            });

            const spans = document.getElementsByClassName("no-pop");

            for (var index = 0; index < spans.length; index++) {
                doSet(index, spans);
            }

            function doSet(index, spans) {
                const span = spans[index];
                span.addEventListener("mousedown", e => {
                    e.stopPropagation();
                    e.preventDefault();
                    return false;
                });
                span.addEventListener("mouseup", e => {
                    e.stopPropagation();
                    e.preventDefault();
                    return false;
                });
                span.addEventListener("touchend", e => {
                    e.stopPropagation();
                    e.preventDefault();
                    return false;
                });
                span.addEventListener("touchmove", e => {
                    e.stopPropagation();
                    e.preventDefault();
                    return false;
                });
                span.addEventListener("touchstart", e => {
                    e.stopPropagation();
                    e.preventDefault();
                    return false;
                });
                span.addEventListener("click", e => {
                    e.stopPropagation();
                    e.preventDefault();
                    return false;
                });
            }
        }
    };
</script>

<style lang="less">
    @height: 18%;
    @width: @height * 520 / 1000;
    @left: 78%;

    .simulation-screen:root {
        font-size: calc(1vw + 1vh + .5vmin)
    }

    .simulation-screen {
        position: absolute;
        width: 39%;
        left: 27%;
        top: 14%;
        /*border: 1px solid red;*/
    }

    .simulation-back,
    .simulation-up,
    .simulation-down,
    .simulation-yes {
        width: @width;
        height: @height;
        display: inline-block;
        position: absolute;
        left: @left;
        // border:1px solid red;
    }

    @back-line-color: #ff6600;

    .back-line {
        width: 15vh;
        height: 1px;
        left: 100%;
        top: 50%;
        border-top: 1px solid @back-line-color;
        position: absolute;
        display: inline-block;

        .back-line-text {
            position: absolute;
            right: -80px;
            top: -13px;
        }
    }

    .simulation-yes {
        top: 68.4%;
        left: @left - 2;
        width: @width + 2;
        height: @height - 2;
    }

    .simulation-back {
        top: 49.4%;
    }

    .simulation-up {
        top: 9.5%;
    }

    .simulation-down {
        top: 29.3%;
    }
</style>
